import React, { useEffect, useState } from "react"
import { Select, DatePicker, Space, Table, Modal } from 'antd'
import { kanjlistdel, kanjlistfilter } from "../api/index"
import "../index.css"
import axios from 'axios'
import { connect } from 'react-redux'
// 砍价状态
const { Option } = Select;

// 时间选择
const dateList = ["全部", "今天", "昨天", "最近7天", "最近30天", "本月", "本年"]
// 日期
function onChange(date, dateString) {
    
}
const Bargain_list = (props) => {
    const { kanjialist } = props
    // 分页
    const [isModalVisible, setIsModalVisible] = useState(false);
    // 渲染数据列表
    useEffect(() => {
        bargainlist()
    }, [])  // eslint-disable-line react-hooks/exhaustive-deps

    const bargainlist = () => {
        axios.get('/bargainkill').then(res => {
            // 
            props.dispatch({
                type: 'DATA_KANJIA',
                payload: res.data.data
            })
        })
    }

    // table
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            align: "center",
            id: 'id',
        },
        {
            title: '砍价图片',
            dataIndex: 'img',
            align: "center",
            id: 'img',
            render: img => <img style={{ width: 55, height: 55 }} src={img} alt="" />
        },
        {
            title: '砍价商品名称',
            dataIndex: 'name',
            align: "center",
            id: 'name',
        },
        {
            title: '商品介绍',
            dataIndex: 'title',
            align: "center",
            id: 'title',
        },
        {
            title: '砍价价格',
            dataIndex: 'kanjia',
            align: "center",
            id: 'kanjia',
        },
        {
            title: '总共砍次数',
            dataIndex: 'cishu',
            align: "center",
            id: 'cishu',
        },
        {
            title: '剩余砍价次数',
            dataIndex: 'shenci',
            align: "center",
            id: 'shenci',
        },
        {
            title: '开始时间',
            dataIndex: 'kaitime',
            align: "center",
            id: 'kaitime',
        },
        {
            title: '结束时间',
            dataIndex: 'jietime',
            align: "center",
            id: 'jietime',
        },
        {
            title: '砍价状态',
            dataIndex: 'zhuang',
            align: "center",
            id: 'zhuang',
        },
        {
            title: '操作',
            id: 'action',
            align: "center",
            render: (text, record) => (
                <Space size="middle">
                    <span onClick={record.zhuang === "进行中" ? () => { handledetail(record) } : () => { handledel(record.id) }}>{record.zhuang === "进行中" ? "查看详情" : "删除"}</span>
                </Space>
            ),
        }
    ]
    const [detailobj, setDetailObj] = useState({})
    // 查看详情
    const handledetail = (item) => {
        setDetailObj(item)
        setIsModalVisible(true);
    }
    // 对话框
    const handleOk = (id) => {
        setIsModalVisible(false);
    };

    const handleCancel = (id) => {
        setIsModalVisible(false);
    };
    // 删除
    const handledel = (id) => {
        
        kanjlistdel({ id: id }).then(res => {
            
        })
        // message.success("删除成功")
        bargainlist()
    }
    // 搜索显示
    function handleChange(value) {
        
        const sou = `${value}`
        kanjlistfilter({ sou }).then(
            res => {
                
                bargainlist()
            }
        )
    }
    return (
        <div className="kjlist">
            <div className="kjheader">
                <p>时间选择：</p>
                <p>
                    {
                        dateList.map((item, index) => <span id={index} key={index}>{item}</span>)
                    }
                </p>
                <Space direction="vertical">
                    <DatePicker onChange={onChange} />
                </Space>
            </div>
            <div className="typeSearch">
                <span>砍价状态：</span>
                <Select defaultValue="请选择" style={{ width: 180 }} onChange={handleChange}>
                    <Option value="请选择">请选择</Option>
                    <Option value="进行中">进行中</Option>
                    <Option value="已结束">已结束</Option>
                </Select>
            </div>
            <div className="kjlist-main">
                <Table columns={columns} dataSource={kanjialist} scroll={{ y: 540 }} rowKey="id" />
                <Modal title="查看详情" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} roeid="id">
                    <table border="1">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>用户图片</th>
                                <th>名称</th>
                                <th>砍价金额</th>
                                <th>砍价时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{detailobj.id}</td>
                                <td><img src={detailobj.img} alt="" /></td>
                                <td>{detailobj.name}</td>
                                <td>{detailobj.kanjia}</td>
                                <td>{detailobj.kaitime}</td>
                            </tr>
                        </tbody>
                    </table>
                </Modal>
            </div>
        </div>
    )
}

export default connect((state) => {
    return {
        kanjialist: state.kanjiaList
    }
})(Bargain_list);
